<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>弹出框</title>
		<link href="css/bootstrap.min.css" rel="stylesheet" />
	</head>
	<body>
		<!--
			为任意元素添加一小块浮层，就像 iPad 上一样，用于存放非主要信息。
			它依赖与工具提示插件,也需要初始化的
			与工具提示的区别 工具提示 是点击后触发  而弹出框是鼠标略过后触发
			分为两部分 内容和标题
			 data-placement="left" data-placement="right"(默认)
			 data-placement="top"  data-placement="buttom" 
			 data-trigger="focus" 添加一个焦点 (不好使呀) 空白处消失
			 data-animation="false" 取消效果
			 尽量使用 <a> 标签
		-->
		<div class="container">
			<button type="button" class="btn btn-default js-popover" 
				data-toggle="popover" data-placement="right" title="标题" 
				data-content="内容"  data-animation="false"> 弹出框
			</button>
		
		</div>
		
		<script type="text/javascript" src="js/jquery.min.js" ></script>
		<script type="text/javascript" src="js/bootstrap.min.js" ></script>
		<script>
			$(".js-popover").popover();
			$(".js-popover").popover("show");//浏览器加载时显示
			/**
			 * 依然有四个事件属性
			 */
			$('.js-popover').on('hidden.bs.popover', function () {
                alert("hello");
			})
		</script>
	</body>
</html>
